@keyframes drop-from-top-tran {
    0%{
        opacity: 0;
        transform: translate(-50%, -100%) scale(0);
    }
}
@keyframes left-in {
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
}
@keyframes right-in {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
}
@keyframes top-in {
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
}
@keyframes bottom-in {
    0%{
        opacity: 0;
        transform: translateY(100%);
    }
}